<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Ruiyun Cloud Documentation Platform - 瑞云开放平台">
    <title>{% block title %}Ruiyun Cloud{% endblock %}</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/logo.ico') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- Navigation Bar -->
    <header class="header">
        <nav class="navbar">
            <div class="container">
                <a href="{{ url_for('public.index') }}" class="logo">
                    <span class="logo-icon">📚</span>
                    瑞云开放平台
                </a>
                <div class="nav-links">
                    <a href="{{ url_for('public.index') }}">文档中心</a>
                    {% if session.get('admin_id') %}
                        <a href="{{ url_for('admin.dashboard') }}">管理后台</a>
                        <a href="{{ url_for('admin.logout') }}">退出登录</a>
                    {% else %}
                        <a href="{{ url_for('admin.login') }}">管理员登录</a>
                    {% endif %}
                </div>
            </div>
        </nav>
    </header>

    <!-- Flash Messages -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="flash-messages">
                <div class="container">
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }}">
                            {{ message }}
                            <button class="close-btn" onclick="this.parentElement.remove()">×</button>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    {% endwith %}

    <!-- Main Content -->
    <main class="main-content">
        <div class="container">
            {% block content %}{% endblock %}
        </div>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 Ruiyun Cloud Documentation Platform. All rights reserved.</p>
            <p class="footer-links">
                <a href="https://gitee.com/leonyan2020/ruiyun-cloud.git">Gitee</a> |
                <a href="#">帮助</a> |
                <a href="#">关于</a>
            </p>
        </div>
    </footer>

    <script>
        // Auto-hide flash messages after 5 seconds
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                alert.style.transition = 'opacity 0.5s';
                alert.style.opacity = '0';
                setTimeout(() => alert.remove(), 500);
            });
        }, 5000);
    </script>
    {% block extra_js %}{% endblock %}
</body>
</html>
